<template>
  <div class="app-container user">
    <AppSearchForm
      v-model:filter="filter"
      @handle-search="handleSearch"
      @handle-add="handleAdd"
      @handle-clear="handleClear"
    />
    <PaginationCard
      v-model:currentPage="paginationData.currentPage"
      v-model:pageSize="paginationData.pageSize"
      :load-list="getTableData"
      :total="paginationData.total"
    >
      <AppTable
        v-loading="isLoading"
        :data="tableData"
        :columns="columns"
        border
      />
    </PaginationCard>
    <UserForm
      v-model:editId="editId"
      v-model:visible="visible"
      @success="handleSuccess"
    />
    <PermissionsDialog
      ref="permissionsDialog"
      v-model:editId="editId"
      v-model:visible="permissionsDialogVisible"
      provider-name="U"
      @success="permissionsDialogVisible=false"
    />
    <ClaimDialog
      v-model:visible="claimDialogVisible"
      v-model:editId="editId"
      id-key="userId"
      :get-current-claims="getUserClaims"
      :get-all-claim-types="getAllUserClaimTypes"
      :set-claims="setUserClaims"
      @success="claimDialogVisible = false"
    />
  </div>
</template>

<script lang="tsx" setup>
import { onMounted, reactive, ref } from 'vue'
import { getUsers, deleteUser, getAllUserClaimTypes, getUserClaims, setUserClaims } from '@/http/user'
import { IUser } from '@/http/types/user'
import AppSearchForm from '@/components/AppSearchForm/index.vue'
import PaginationCard from '@/components/PaginationCard/index.vue'
import UserForm from './UserForm.vue'
import PermissionsDialog from '@/components/PermissionsDialog/index.vue'
import AppTable from '@/components/AppTable/index.vue'
import AppButtonGroup from '@/components/AppButtonGroup/index.vue'
import { IButtonConfig } from '@/components/AppButtonGroup/type'
import ClaimDialog from '@/components/ClaimDialog/index.vue'
import { ElMessageBox } from 'element-plus'
import { parseDate2Str } from '@/utils/timeUtils'

const buttonConfig:IButtonConfig[] = [
  {
    name: '修改',
    eventName: 'handleEdit',
    type: 'primary'
  },
  {
    name: '权限',
    eventName: 'handleRole',
    type: 'primary'
  },
  {
    name: '声明',
    eventName: 'handleClaim',
    type: 'primary'
  },
  {
    name: '删除',
    eventName: 'handleDelete',
    type: 'primary'
  }
]
const columns = ref([
  { label: '登录名', prop: 'userName' },
  { label: '姓名', prop: 'name' },
  { label: '邮箱地址', prop: 'email' },
  { label: '手机号', prop: 'phoneNumber' },
  { label: '创建时间', prop: 'creationTime', formatter: (row:IUser) => parseDate2Str(row.creationTime) },
  { label: '启用', prop: 'isActive', formatter: (row:IUser) => row.isActive ? '是' : '否' },
  {
    label: '操作',
    fixed: 'right',
    render: ({ row }:{row:IUser}) => {
      return <AppButtonGroup
        rowData={row}
        buttonConfigs={ buttonConfig }
        onEvent={(eventName:string) => {
          eventName === 'handleEdit' && handleEdit(row)
          eventName === 'handleRole' && handleRole(row)
          eventName === 'handleDelete' && handleDelete(row)
          eventName === 'handleClaim' && handleClaim(row)
        }}
      >
      </AppButtonGroup>
    }
  }
])

const paginationData = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0
})
const permissionsDialogVisible = ref(false)

const filter = ref('')
const tableData = ref<IUser[]>([])

const handleSearch = () => {
  paginationData.currentPage = 1
  getTableData()
}

const visible = ref(false)
const handleAdd = () => {
  visible.value = true
}

const handleClear = () => {
  filter.value = ''
  handleSearch()
}

const isLoading = ref(false)
const getTableData = async () => {
  isLoading.value = true
  const res = await getUsers(
    paginationData.currentPage,
    paginationData.pageSize,
    filter.value
  ).finally(() => {
    isLoading.value = false
  })
  tableData.value = res.items
  paginationData.total = res.totalCount
}

onMounted(() => {
  getTableData()
})

const handleEdit = (row:IUser) => {
  editId.value = row.id || ''
  visible.value = true
}

const handleDelete = (row:IUser) => {
  const id = row.id
  ElMessageBox.confirm(
    '删除该用户, 是否继续?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning'
    }
  )
    .then(async () => {
      await deleteUser(id)
      await getTableData()
    })
}

const editId = ref('')

// const permissionsDialog = ref<InstanceType<typeof PermissionsDialog>|null>(null)
const handleRole = (row:IUser) => {
  editId.value = row.id || ''
  permissionsDialogVisible.value = true
}
const handleSuccess = () => {
  visible.value = false
  getTableData()
}

const claimDialogVisible = ref(false)
const handleClaim = (row:IUser) => {
  editId.value = row.id
  claimDialogVisible.value = true
}
</script>

<style lang="scss" scoped>
</style>
